<template>
  <div class="dan">
    <div id="echarts" style="width: 100%;height: 260px"></div>
    <el-pagination
        small
        layout="prev, pager, next"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="allInfo.pageNum"
        :page-size="allInfo.pageSize"
        :total="allInfo.total">
    </el-pagination>
    <div style="margin-top: 30px"></div>
  </div>
</template>

<script>
export default {
  name: "Charts",
  data() {
    return {
      texts: 111,
      page: {
        pageNum: 1,
        pageSize: 5
      },
      message: [],
      allInfo: {},
      drawer: false,
      direction: 'rtl',
      formLabelAlign: {
        height: "",
        weight: ""
      }
    };
  },
  mounted() {
    this.getData()
  },
  methods: {
    upload() {
      if (this.formLabelAlign.height == "" || this.formLabelAlign.weight == "") {
        this.$message.error("请输入完整信息")
        return
      }
      // //console.log(this.formLabelAlign)
      this.$http.post("/phy/insertPhy", this.formLabelAlign).then(data => {
        if (data.code == 200) {
          this.formLabelAlign = {
            height: "",
            weight: ""
          }
          this.$message.success("添加成功")
          this.getData()
          this.drawer = false
        }
      })
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(() => {
            done();
          })
          .catch(() => {
          });
    },
    async getData() {
      await this.$http.post("/recommendFirst/pageGetAll", this.page).then(data => {
        console.log(data)
        this.message = data.data.list
        this.allInfo = data.data
      })
      this.echarts()
    },
    // 监听页数变化
    handleSizeChange(pageSie) {
      this.page.pageSize = pageSie
      this.getData()
    },
    // 监听当前页变化
    handleCurrentChange(PageNum) {
      this.page.pageNum = PageNum
      this.getData()
    },
    echarts() {
      let data = this.message

      let xArr = []
      let likesArr = []
      let commentArr = []
      let shareArr = []

      for (let i = 0; i < data.length; i++) {
        console.log(data[i])
        xArr.push("aid: " + data[i].aid)
        likesArr.push(data[i].likes)
        commentArr.push(data[i].comment)
        shareArr.push(data[i].share)
      }

      // //有的话就获取已有echarts实例的DOM节点。
      let myChart = this.$echarts.getInstanceByDom(document.getElementById("echarts"))
      if (myChart == null) { // 如果不存在，就进行初始化
        myChart = this.$echarts.init(document.getElementById("echarts"));
      }
      let option = {
        title: {
          text: '文创数据'
        },
        tooltip: {},
        xAxis: {
          data: xArr
        },
        yAxis: {},
        legend: {
          data: [
            {
              name: '点赞',
              icon: 'rect'
            },
            {
              name: '评论',
              icon: 'rect'
            },
            {
              name: '转发',
              icon: 'rect'
            }

          ]
        },
        series: [
          {
            name: '点赞',
            type: 'bar',
            data: likesArr,
            itemStyle: {
              // 点的颜色。
              color: '#f5ebba'
            },
            // 高亮样式。
            emphasis: {
              itemStyle: {
                // 高亮时点的颜色。
                color: '#e8f5ba'
              }
            }
          },
          {
            name: '评论',
            type: 'bar',
            data: commentArr,
            itemStyle: {
              // 点的颜色。
              color: '#4dc9c9'
            },
            // 高亮样式。
            emphasis: {
              itemStyle: {
                // 高亮时点的颜色。
                color: '#80b6da'
              }
            }
          },
          {
            name: '转发',
            type: 'bar',
            data: shareArr,
            itemStyle: {
              // 点的颜色。
              color: '#d0eebe'
            },
            // 高亮样式。
            emphasis: {
              itemStyle: {
                // 高亮时点的颜色。
                color: '#719b55'
              }
            }
          },
        ],
      };
      myChart.setOption(option);
    }

  }
}
</script>

<style scoped>

.dan {
  /*height: 320px;*/
  width: 100%;
}

</style>